<template>
  <el-drawer
    v-bind="$attrs" 
    v-on="$listeners"
    ref="jsonCodeDrawer"
    @opened="onOpen" 
    size="50%">
    <span slot="title"><i class="el-icon-tickets" style="margin-right:6px;"></i><b>JSON Code</b></span>
    <div style="height:calc(100%-46px);">
      <el-row :style="rowStyle">
        <el-col :span="24" class="colStyle">
          <textarea ref="jsonCodeEditor" id="jsonCodeEditor" style="visibility: hidden;"></textarea>
        </el-col>
      </el-row>
    </div>
    <div style="float:left;margin-left:10px;">            
      <el-button type="primary" @click="handlerSubForm" size="mini" style="width:240px;margin-top:10px;">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
// 核心样式
import  CodeMirror    from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/mode/javascript/javascript'
export default {
  name:'jsonCode',
  props:['code'],
  components:{

  },
  data(){
    return{
      editor             : undefined,
      options: {
        theme            : 'dracula',// 主题，对应主题库 JS 需要提前引入
        tabSize          : 4,        // 缩进格式
        indentUnit       : 4,
        smartIndent      :true,
        width            :'100%',
        styleActiveLine  : true,
        lineNumbers      : true,
        line             : true,
        readOnly         : true,
        matchBrackets    : true,
        lineNumbers      : true,     // 显示行号
        line             : true,
        styleActiveLine  : true,     // 高亮选中行
      }
    }
  },
  methods:{
    onOpen() {
      this.$nextTick(()=> {
        if(this.$refs.jsonCodeEditor && this.editor===undefined){        
          this.editor = CodeMirror.fromTextArea(this.$refs.jsonCodeEditor,this.options)
          let  ht     = document.body.clientHeight-108
          if(ht<=600){
            ht=600
          }
          this.editor.setSize('auto',ht)
          this.editor.getDoc().setValue(this.code)
          this.editor.refresh()
          this.editor.focus()
        }
      })
    },
    onClose() {},
    handlerSubForm(){
      this.$refs.jsonCodeDrawer.closeDrawer()
    }
  },
  created(){
    //初始化表单
  },
  mounted() {
    this.onOpen()
  },
  beforeCreate(){

  },
  computed:{
    rowStyle(){
      const ht = document.body.clientHeight
      const wt = document.body.clientWidth
      return 'height:'+(ht-108)+'px;width:'+(wt/2)+'px;overflow-x:hidden;overflow-y:auto;'
    }
  }
}
</script>
<style scoped>
.colStyle{
  padding:0px;
  height:100%;
  border:1px solid #E0E0E0;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-drawer__header{
  padding:20px 0px 0px 0px;
}
</style>